<!-- Creating custom components -->
<!-- http://localhost:3000/isolated/exercise/04.html -->

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
    // 🐨 Make a function called `message` which returns the JSX we want to share

    // 🐨 use that function in place of the divs below with:
    // 💰 {message({children: 'Hello World'})} {message({children: 'Goodbye World'})}
    const element = (
      <div className="container">
        <div className="message">Hello World</div>
        <div className="message">Goodbye World</div>
      </div>
    )

    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>
